<template>
	<view class="sign_page">
		<u--form :model="form" :rules="rules" ref="formRef" errorType="toast" labelWidth="80px"
			:labelStyle="{marginBottom:'12px',fontWeight:'bold'}">
			<u-form-item label="注册类型:" prop="userType" labelPosition="top">
				<view class="select_tag">
					<block v-for="userType in userTypeList" :key="userType.type">
						<view class="d_tag" :class="{ 'active_tag': form.userType === userType.type }"
							@click="active(userType.type)">{{userType.label}}</view>
					</block>
				</view>
			</u-form-item>
			<u-form-item label="用户名:" prop="userName" labelPosition="top" required>
				<u--input v-model="form.userName" type="text" clearable="true" :customStyle="{
						fontSize: '14px',
						color: '#999999',
				        }" placeholder="请输入姓名,企业用户请输入公司全称"></u--input>
			</u-form-item>
			<u-form-item label="手机号码:" prop="phone" labelPosition="top" required>
				<u--input v-model="form.phone" type="number" :maxlength="11" :customStyle="{
						fontSize: '14px',
						color: '#999999',
				        }" placeholder="请输入手机号码"></u--input>
			</u-form-item>
			<u-form-item label="密码:" prop="password" labelPosition="top" required>
				<u--input v-model="form.password" type="password" :customStyle="{
							color: '#999999',
							fontSize: '14px',
				        }" placeholder="请输入密码"></u--input>
			</u-form-item>
			<u-form-item label="确认密码:" prop="checkPass" labelPosition="top" required>
				<u--input v-model="form.checkPass" type="password" :customStyle="{
									color: '#999999',
									fontSize: '14px',
			                        }" placeholder="请输入确认密码"></u--input>
			</u-form-item>
		</u--form>
	</view>
	<view class="saveSign">
		<u-button color="#2080F7" text="确认并注册" :customStyle="{
				width: '456rpx',
				height: '96rpx',
				borderRadius: '180rpx',
				fontSize: '32rpx',
				fontWeight: 'bold'
			}" @click="saveSign"></u-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		toRefs
	} from 'vue';
	import {
		register
	} from '@/api/user.js'
	import {
		toast
	} from '../utils/common';
	const {
		proxy
	} = getCurrentInstance();
	//手机号码校验
	const validatePhone = (rule, value, callback) => {
		const reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
		if (!reg.test(value)) {
			callback(new Error('请输入正确的中国地区手机号码!'));
		}
		callback();
	};
	//确认密码校验规则
	const validatecheckPass = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入确认密码'));
		} else if (value !== form.value.password) {
			callback(new Error('两次输入密码不相同!'));
		} else {
			callback();
		}
	};
	const userTypeList = ref([{
			label: '培训专家',
			type: '02'
		},
		{
			label: '咨询专家',
			type: '03'
		},
		{
			label: '双师(培训+咨询)',
			type: '04'
		},
		{
			label: '普通用户',
			type: '01'
		}
	])

	const data = reactive({
		form: {
			userType: '02',
			userName: '',
			phone: '',
			password: '',
			checkPass: ''
		},
		rules: {
			userName: [{
				required: true,
				message: '用户名不能为空',
				trigger: 'blur'
			}],
			phone: [{
					required: true,
					message: '手机号不能为空',
					trigger: 'blur'
				}, {
					max: 11,
					message: '请输入手机号码，长度11位',
					trigger: 'blur'
				},
				{
					validator: validatePhone,
					triger: 'blur'
				}
			],
			password: [{
				required: true,
				message: '密码不能为空',
				trigger: 'blur'
			}, {
				min: 6,
				max: 15,
				message: '请输入密码，长度6-15个字符',
				trigger: 'blur'
			}],
			checkPass: [{
					required: true,
					message: '请输入确认密码，长度6-15个字符',
					trigger: 'blur'
				},
				{
					min: 6,
					max: 15,
					message: '请输入确认密码，长度6-15个字符',
					trigger: 'blur'
				},
				{
					validator: validatecheckPass,
					triger: 'blur'
				}
			],
		}
	})
	const {
		form,
		rules
	} = toRefs(data);

	//选中用户类型
	function active(e) {
		form.value.userType = e
	}
	/**
	 * 注册
	 */
	function saveSign() {
		proxy.$refs["formRef"].validate().then(valid => {
			register(form.value).then(resp => {
				toast("注册成功")
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/authLogin'
					})
				},1000)
			})
		})
	}
</script>

<style lang="scss">
	.sign_page {
		padding: 40rpx 32rpx;

		.select_tag {
			//grid布局每行两个
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx;
			margin-bottom: 20rpx;

			.d_tag {
				width: 330rpx;
				height: 72rpx;
				//文字水平垂直居中
				display: flex;
				justify-content: center;
				align-items: center;
				background: #F4F4F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: normal;
				font-size: 28rpx;
				color: #999999;
			}

			.active_tag {
				width: 330rpx;
				height: 72rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2080F7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}

		}
	}

	.saveSign {
		position: fixed;
		bottom: 40px;
		width: 100%;
	}
</style>